<!-- 设置地块 -->
<template>
	<view>
		<uni-nav-bar :title="title" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true" />
		<view class="main">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="form">
				<!-- 所在区域-省市区 -->
				<u-form-item label="选择地址" prop="formData.regionStr" @click="goMap">
					<view class="left-image">
						<image class="left-img" src="@/subPage1/static/service-order/jutidizhi.png" mode="heightFix">
						</image>
					</view>
					<template v-if="model.formData.regionStr">
						<view>
							<u--input v-model="model.formData.regionStr" style="pointer-events: none;flex-wrap: wrap;"
								disabled disabledColor="#ffffff" border="none" placeholder='请选择所在区域'></u--input>
						</view>
					</template>
					<template v-else>
						<view class="lnglat">
							选择地址<u-icon name="arrow-right" class="icon" color="#0752fd"></u-icon>
						</view>
					</template>
				</u-form-item>

				<!-- 具体地址 -->
				<u-form-item label="详细地址" class="fullAddress" prop="formData.address">
					<view class="left-image">
						<image class="left-img" src="@/subPage1/static/service/address.png" mode="heightFix">
						</image>
					</view>
					<u--textarea class="textarea" v-model="model.formData.address" placeholder='请输入具体地址' border="none"
						style="display: flex;"></u--textarea>
				</u-form-item>

				<!-- 地块名称 -->
				<u-form-item label="地块名称" prop="formData.facilityName" borderBottom>
					<view class="left-image">
						<image class="left-img" src="@/subPage1/static/service/type.png" mode="heightFix"></image>
					</view>
					<u--input v-model="model.formData.facilityName" placeholder='请输入地块名称' border="none"></u--input>
				</u-form-item>
				<!-- 地块编号 -->
				<u-form-item label="地块编号" prop="formData.facilityNo">
					<view class="left-image">
						<image class="left-img" src="@/subPage1/static/service/fuwufang.png" mode="heightFix"></image>
					</view>
					<u--input v-model="model.formData.facilityNo" placeholder='请输入地块编号' border="none"></u--input>
				</u-form-item>
			</u--form>

			<u-button type="primary" class="btn" shape="circle" text="保存" @click="save"></u-button>

		</view>
	</view>
</template>

<script>
	import {
		addressList
	} from '@/subPage1/plugins/address.js'
	import API from '@/api/socialized-servce/farm-service/normalUser/my-arable'
	export default {
		data() {
			return {
				title: '',
				model: {
					formData: {
						facilityName: '',
						facilityNo: '',
						address: '',
						regionStr: '',
						provinceId: '',
						cityId: '',
						areaId: '',
						serviceProviderNo: '',
					},
					map: ''
				},
				rules: {
					'formData.facilityName': {
						type: 'string',
						required: true,
						message: '地块名称不能为空',
						trigger: ['blur', 'change']
					},
					'formData.facilityNo': {
						type: 'string',
						required: true,
						message: '地块编号不能为空',
						trigger: ['blur', 'change']
					},
					'formData.regionStr': {
						type: 'string',
						required: true,
						message: '所在区域不能为空',
						trigger: ['blur', 'change']
					},
					'formData.address': {
						type: 'string',
						required: true,
						message: '地址不能为空',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onLoad(e) {
			this.title = e.title
			this.map = e.map
		},
		mounted() {
			if (this.title === '编辑地块') {
				let obj = uni.getStorageSync('editArableItem')
				this.model.formData = {
					...obj
				}
			}
			this.model.formData.serviceProviderNo = uni.getStorageSync('serviceProviderNo')
			if (this.map === 'map') {
				let address = uni.getStorageSync('formatted_address')
				if(address) {
					var reg = /.+?(省|市|自治区|自治州|县|区)/g;
					let arr = address.match(reg).toString().split(",");
					this.model.formData.regionStr = `${arr[0]}${arr[1]}${arr[2]}`
					this.model.formData.address = address
					addressList.forEach(item => {
						if (item.name === arr[0]) {
							this.model.formData.provinceId = item.provinceId
						}
						item.city.forEach(item1 => {
							if (item1.name === arr[1] && item.name === arr[0]) {
								this.model.formData.cityId = item1.cityId
							}
							if (item1.name === '市辖区' && item.name === arr[0]) {
								this.model.formData.cityId = item1.cityId
							}

							item1.area.forEach(item2 => {
								if (item2.name === arr[2] && item.name === arr[0]) {
									this.model.formData.areaId = item2.areaId
								}
							})
						})
					})
				}
			}

		},
		methods: {
			goMap() {
				uni.navigateTo({
					url: `/subPage1/map1/map1?title=${this.title}`
				})
			},
			async save() {
				this.$refs.form.validate().then(async () => {
					let params = {
						...this.model.formData
					}
					params['latitude'] = uni.getStorageSync('lat')
					params['longitude'] = uni.getStorageSync('lng')
					if (this.title === '新增地块') {
						let res = await API.add(params)
						if (res.code === 200) {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							})
							uni.redirectTo({
								url: '/subPage1/socialized-service/farm-service/normalUser/my-arable/my-arable',
								animationType: 'pop-in',
								animationDuration: 200
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "error"
							})
						}
					} else {
						let res = await API.edit(params)
						if (res.code === 200) {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							})
							uni.redirectTo({
								url: '/subPage1/socialized-service/farm-service/normalUser/my-arable/my-arable',
								animationType: 'pop-in',
								animationDuration: 200
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "error"
							})
						}
					}
				}).catch(errors => {
					console.log("失败信息:" + JSON.stringify(errors))
				})
			},
			back() {
				uni.redirectTo({
					url: '/subPage1/socialized-service/farm-service/normalUser/my-arable/my-arable'
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100%;

		.lnglat {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 48rpx;
			border: 2rpx solid #0752fd;
			color: #0752fd;
		}

		.btn {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 60rpx;
			width: 90%;
			background: linear-gradient(135deg, #b5d7ff, #0752fd);
			border: 0;
			font-weight: 600;
		}
	}

	/deep/.u-form {
		padding: 0 32rpx;
	}

	/deep/.u-form-item {
		position: relative;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	/deep/.u-form-item {
		&:nth-child(n+8) {
			background-color: #E2E7F8;
		}
	}

	.left-image {
		position: absolute;
		// top: 50%;
		// transform: translateY(-50%);
		left: 0;
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
		margin-left: 22rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
	}

	.left-img {
		height: 26rpx;
	}

	// /deep/ .u-icon--right {
	// 	position: absolute;
	// 	right: 0;
	// 	top: 50%;
	// 	transform: translateY(-50%);
	// }

	.uni-input-input {
		pointer-events: none;
	}

	/deep/ .u-form-item__body__left {
		width: 200rpx !important;
		margin-left: 50px;
	}

	.fullAddress {
		display: flex;
		padding: 10rpx 0 !important;

		.textarea {
			width: 100%;
			padding: 0 !important;
			min-height: 114rpx !important;
			margin-right: 0;
		}

		/deep/.uni-textarea-textarea {
			padding: 2rpx !important;
			min-height: 114rpx !important;
		}

		/deep/ .uni-textarea-compute {
			flex: 1;
			min-height: 114rpx !important;
		}
	}

	/deep/.uni-textarea-wrapper {
		min-height: 114rpx !important;
	}
</style>